<template>
    <div class="i-page company-page fill-height">
        <el-row :gutter="20">
            <el-col :span="6">
                <el-card
                        class="company-item fill-height d-flex align-center justify-center cursor-pointer"
                        shadow="hover"
                        @click="api.onCreate()"
                >
                    <div class="d-flex flex-column justify-center align-center">
                        <el-icon :size="24">
                            <Plus/>
                        </el-icon>
                        <div class="font-size-body-2 py-3">新建公司</div>
                    </div>
                </el-card>
            </el-col>

            <el-col v-for="company in api.tableState.dataSource" :key="'company-item_' + company.id" :span="6">
                <el-card class="company-item fill-width" shadow="hover">
                    <template #header>
                        <div class="d-flex justify-space-between align-center">
                            <span class="font-size-body-1 font-weight-bold">{{ company.name }}</span>
                            <span class="font-size-body-2">{{ company.createTime }}</span>
                        </div>
                    </template>
                    <template #default>
                        <el-space>
                            <el-button size="small" type="primary" @click="api.onEdit(company.id)">编辑</el-button>
                            <el-button size="small" type="danger" @click="api.onDelete(<string>company.id)">删除</el-button>
                        </el-space>
                    </template>
                </el-card>
            </el-col>
        </el-row>

        <Create :api="api"/>
        <Edit :api="api"/>
        <Detail :api="api"/>
    </div>
</template>

<script lang="ts" setup>
import {CompanyApi} from "@/api/system/company/company.api";
import {onMounted} from "vue";
import Create from "@/views/config/companyList/Create.vue";
import Edit from "@/views/config/companyList/Edit.vue";
import Detail from "@/views/config/companyList/Detail.vue";
import {Plus} from "@element-plus/icons-vue";

const api = new CompanyApi();

onMounted(() => {
    api.onListPage();
});
</script>

<style lang="scss" scoped>
.company-page {

  .HomeFilled-ICON {
    margin: 6px;
  }

  :deep(.ant-card-body) {
    position: relative;
  }

  .company-item {
  }
}
</style>
